<template>
    <md-table v-model="users" md-sort="name" md-sort-order="asc" md-card md-fixed-header>
        <md-table-toolbar>
            <h1 class="md-title">Tasks</h1>
            <md-button class="md-icon-button" md-menu-trigger>
                <md-icon>add</md-icon>
            </md-button>
        </md-table-toolbar>

        <md-table-row slot="md-table-row" slot-scope="{ item }">
            <md-table-cell md-label="ID" md-sort-by="id" md-numeric>{{ item.id }}</md-table-cell>
            <md-table-cell md-label="Name" md-sort-by="name">{{ item.name }}</md-table-cell>
            <md-table-cell md-label="Description" md-sort-by="description">{{ item.description }}</md-table-cell>
            <md-table-cell md-label="Job Title" md-sort-by="title">{{ item.title }}</md-table-cell>
        </md-table-row>
    </md-table>
</template>
<script>
    import axios from "axios";

    export default {
        name: "Tasks",
        data: () => ({
            users: []
        }),
        created() {
            axios.get('/json/Tasks.json').then(rep =>{
                const { data } =rep
                this.users = data
            })
        }
    }
</script>


<style lang="scss" scoped>
    .card-expansion {
        height: 400px;
    }

    .md-card {
        width: 90%;
        margin: 4px;
        display: inline-block;
        vertical-align: top;
    }
</style>